<template>
  <div class="home">
    home
    <p><button @click="toggleCity">{{city}}</button></p>
    <MusicItem v-for="item of musics" :key="item" :item="item"></MusicItem>
  </div>
</template>

<script>
import { computed, reactive, toRefs } from '@vue/reactivity'
import {useStore} from 'vuex'
import axios from 'axios'
import { onMounted } from '@vue/runtime-core'
import MusicItem from './components/MusicItem.vue'
export default {
  name: 'Home',
  components:{
    MusicItem
  },
  setup(){
    const store = useStore();
    const state = reactive({
      musics:[],
      toggleCity(){
        // console.log(1)
        // console.log(this.$router)
        this.$router.push("/city")
      },
      city:computed(()=>store.state.CityHook.city)
    })
    onMounted(()=>{
      axios.get("http://122.112.161.135:3000/top/playlist").then(res=>{
        // console.log(res.data.playlists)
        state.musics = res.data.playlists
      })
    })
    const refState = toRefs(state);
    return{
      ...refState
    }
  }
}
</script>
<style scoped>
p{
  padding: 10px 0;
}
</style>